:root {
  --font-fallback: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif,
    Apple Color Emoji, Segoe UI Emoji;
  --font-body: system-ui, var(--font-fallback);
  --font-mono: 'IBM Plex Mono', Consolas, 'Andale Mono WT', 'Andale Mono', 'Lucida Console',
    'Lucida Sans Typewriter', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Liberation Mono',
    'Nimbus Mono L', Monaco, 'Courier New', Courier, monospace;

  /*
   * Variables with --color-base prefix define
   * the hue, and saturation values to be used for
   * hsla colors.
   *
   * ex:
   *
   * --color-base-{color}: {hue}, {saturation};
   *
   */

  --color-base-white: 0, 0%;
  --color-base-black: 240, 100%;
  --color-base-gray: 215, 14%;
  --color-base-blue: 212, 100%;
  --color-base-blue-dark: 212, 72%;
  --color-base-green: 158, 79%;
  --color-base-orange: 22, 100%;
  --color-base-purple: 269, 79%;
  --color-base-red: 351, 100%;
  --color-base-yellow: 41, 100%;

  /*
   * Color palettes are made using --color-base 
   * variables, along with a lightness value to
   * define different variants.
   *
   */

  --color-gray-5: var(--color-base-gray), 5%;
  --color-gray-10: var(--color-base-gray), 10%;
  --color-gray-20: var(--color-base-gray), 20%;
  --color-gray-30: var(--color-base-gray), 30%;
  --color-gray-40: var(--color-base-gray), 40%;
  --color-gray-50: var(--color-base-gray), 50%;
  --color-gray-60: var(--color-base-gray), 60%;
  --color-gray-70: var(--color-base-gray), 70%;
  --color-gray-80: var(--color-base-gray), 80%;
  --color-gray-90: var(--color-base-gray), 90%;
  --color-gray-95: var(--color-base-gray), 95%;

  --color-blue: var(--color-base-blue), 61%;
  --color-blue-dark: var(--color-base-blue-dark), 39%;
  --color-green: var(--color-base-green), 42%;
  --color-orange: var(--color-base-orange), 50%;
  --color-purple: var(--color-base-purple), 54%;
  --color-red: var(--color-base-red), 54%;
  --color-yellow: var(--color-base-yellow), 59%;
}

:root {
  color-scheme: light;
  --theme-accent: hsla(var(--color-blue), 1);
  --theme-text-accent: hsla(var(--color-blue), 1);
  --theme-accent-opacity: 0.15;
  --theme-divider: hsla(var(--color-gray-95), 1);
  --theme-text: hsla(var(--color-gray-10), 1);
  --theme-text-light: hsla(var(--color-gray-40), 1);
  /* @@@: not used anywhere */
  --theme-text-lighter: hsla(var(--color-gray-80), 1);
  --theme-bg: hsla(var(--color-base-white), 100%, 1);
  --theme-bg-hover: hsla(var(--color-gray-95), 1);
  --theme-bg-offset: hsla(var(--color-gray-90), 1);
  --theme-bg-accent: hsla(var(--color-blue), var(--theme-accent-opacity));
  --theme-code-inline-bg: hsla(var(--color-gray-95), 1);
  --theme-code-inline-text: var(--theme-text);
  --theme-code-bg: hsla(217, 19%, 27%, 1);
  --theme-code-text: hsla(var(--color-gray-95), 1);
  --theme-navbar-bg: hsla(var(--color-gray-30), 1);
  --theme-navbar-height: 6rem;
  --theme-selection-color: hsla(var(--color-blue), 1);
  --theme-selection-bg: hsla(var(--color-blue), var(--theme-accent-opacity));
}

body {
  background: var(--theme-bg);
  color: var(--theme-text);
}

:root.theme-dark {
  color-scheme: dark;
  --theme-accent-opacity: 0.15;
  --theme-accent: hsla(var(--color-blue), 1);
  --theme-text-accent: hsla(var(--color-blue), 1);
  --theme-divider: hsla(var(--color-gray-10), 1);
  --theme-text: hsla(var(--color-gray-90), 1);
  --theme-text-light: hsla(var(--color-gray-80), 1);

  /* @@@: not used anywhere */
  --theme-text-lighter: hsla(var(--color-gray-40), 1);
  --theme-bg: hsla(var(--color-gray), 1);
  --theme-bg-hover: hsla(var(--color-gray-40), 1);
  --theme-bg-offset: hsla(var(--color-gray-5), 1);
  --theme-code-inline-bg: hsla(var(--color-gray-10), 1);
  --theme-code-inline-text: hsla(var(--color-base-white), 100%, 1);
  --theme-code-bg: hsla(var(--color-gray-5), 1);
  --theme-code-text: hsla(var(--color-base-white), 100%, 1);
  --theme-navbar-bg: hsla(var(--color-gray-20), 1);
  --theme-selection-color: hsla(var(--color-base-white), 100%, 1);
  --theme-selection-bg: hsla(var(--color-purple), var(--theme-accent-opacity));

  /* DocSearch [Algolia] */
  --docsearch-modal-background: var(--theme-bg);
  --docsearch-searchbox-focus-background: var(--theme-divider);
  --docsearch-footer-background: var(--theme-divider);
  --docsearch-text-color: var(--theme-text);
  --docsearch-hit-background: var(--theme-divider);
  --docsearch-hit-shadow: none;
  --docsearch-hit-color: var(--theme-text);
  --docsearch-footer-shadow: inset 0 2px 10px #000;
  --docsearch-modal-shadow: inset 0 0 8px #000;
}

::selection {
  color: var(--theme-selection-color);
  background-color: var(--theme-selection-bg);
}

.message {
  margin-bottom: 1em;
  padding: 15px 30px 15px 15px;
}

.message h5 {
  margin-top: 0;
  margin-bottom: 8px;
  text-transform: uppercase;
}

.message-icon {
  display: inline-block;
  vertical-align: middle;
  margin-right: 0.2em;
}

.message-icon svg {
  display: inline-block;
  width: 22px;
  height: 22px;
  stroke-width: 0;
}

.message-content > :last-child {
  margin-bottom: 0;
}

/* default for custom types */
.message {
  background-color: rgba(118, 51, 219, 0.1);
  border-left: 8px solid #7633db;
}

.message h5 {
  color: #7633db;
}

.message .message-icon svg {
  stroke: #7633db;
  fill: #7633db;
}

/** native types */
.message.is-danger {
  background-image: rgba(230, 126, 34, 0.1);
  border-left: 8px solid #e67e22;
}

.message.is-danger h5 {
  color: #e67e22;
}

.message.is-danger .message-icon svg {
  stroke: #e67e22;
  fill: #e67e22;
}

.message.is-tip {
  background-color: rgba(46, 204, 113, 0.1);
  border-left: 8px solid #2ecc71;
}

.message.is-tip h5 {
  color: #2ecc71;
}

.message.is-tip .message-icon svg {
  stroke: #2ecc71;
  fill: #2ecc71;
}

.message.is-warning {
  background-color: rgba(231, 76, 60, 0.1);
  border-left: 8px solid #e74c3c;
}

.message.is-warning h5 {
  color: #e74c3c;
}

.message.is-warning .message-icon svg {
  stroke: #e74c3c;
  fill: #e74c3c;
}

.message.is-info {
  background-color: rgba(52, 152, 219, 0.1);
  border-left: 8px solid #3498db;
}

.message.is-info h5 {
  color: #3498db;
}

.message.is-info .message-icon svg {
  stroke: #3498db;
  fill: #3498db;
}

.message.is-note {
  background-color: rgba(241, 196, 15, 0.1);
  border-left: 8px solid #f1c40f;
}

.message.is-note h5 {
  color: #f1c40f;
}

.message.is-note .message-icon svg {
  stroke: #f1c40f;
  fill: #f1c40f;
}
